<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>果壳悦食管理平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/4.7.0/css/font-awesome.css">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 自定义 CSS -->
    <style>
        .card {
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .stat-card {
            background: linear-gradient(135deg, #b6a2cc, #2575fc);
            color: white;
            border: none;
        }
    </style>
</head>
<body>
    {% extends 'admin/master.html' %}

    {% block body %}
        <div class="container-fluid">
            <h1 class="mt-4">果壳悦食管理平台 - 统计信息</h1>
            <div class="row mt-4">
                <!-- 用户总数 -->
                <div class="col-md-4 mb-4">
                    <div class="card stat-card">
                        <div class="card-body">
                            <h5 class="card-title"><i class="fa fa-user"></i> 用户总数</h5>
                            <p class="card-text display-4">{{ user_count }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- BMI 分布图 -->
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">用户 BMI 分布</h5>
                            <canvas id="bmiChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- 性别分布图 -->
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">用户性别分布</h5>
                            <canvas id="genderChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 年龄分布图 -->
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">用户年龄分布</h5>
                            <canvas id="ageChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表脚本 -->
        <script>
            // BMI 分布图
            const bmiCtx = document.getElementById('bmiChart').getContext('2d');
            const bmiChart = new Chart(bmiCtx, {
                type: 'pie',
                data: {
                    labels: {{ bmi_distribution | map(attribute='0') | list | tojson | safe }},
                    datasets: [{
                        label: '用户数量',
                        data: {{ bmi_distribution | map(attribute='1') | list | tojson | safe }},
                        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    }
                }
            });

            // 性别分布图
            const genderCtx = document.getElementById('genderChart').getContext('2d');
            const genderChart = new Chart(genderCtx, {
                type: 'doughnut',
                data: {
                    labels: {{ gender_distribution | map(attribute='0') | list | tojson | safe }},
                    datasets: [{
                        label: '用户数量',
                        data: {{ gender_distribution | map(attribute='1') | list | tojson | safe }},
                        backgroundColor: ['#FF6384', '#36A2EB']
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    }
                }
            });

            // 年龄分布图
            const ageCtx = document.getElementById('ageChart').getContext('2d');
            const ageChart = new Chart(ageCtx, {
                type: 'bar',
                data: {
                    labels: {{ age_distribution | map(attribute='0') | list | tojson | safe }},
                    datasets: [{
                        label: '用户数量',
                        data: {{ age_distribution | map(attribute='1') | list | tojson | safe }},
                        backgroundColor: '#4BC0C0'
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        </script>
    {% endblock %}
</body>
</html>